<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const userInfo = ref(JSON.parse(sessionStorage.getItem('user') || '{}'));

function logout() {
  sessionStorage.removeItem('user');
  router.push('/login');
}
</script>

<template>
  <div class="h-full flex flex-col">
    <div class="flex px-4 py-2 bg-black text-white items-center">
      <div>DEMO-APP</div>
      <div class="ml-auto">
        <el-avatar :size="36"></el-avatar>
      </div>
      <div class="ml-2">
        {{ userInfo.name }}
      </div>
      <button @click="logout" class="ml-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
        退出
      </button>
    </div>

    <div class="grow flex items-stretch">
      <div class="w-15em bg-sky-7"></div>
      <div></div>
    </div>
  </div>
</template>

<style scoped>
</style>